<template>
  <div class="form-container">
    <h2>用户注册</h2>
    <form @submit.prevent="submitForm">
      <div class="form-group">
        <label for="name">姓名：</label>
        <input type="text" id="name" v-model="userData.name" required />
      </div>

      <div class="form-group">
        <label for="phone">手机号：</label>
        <input type="text" id="phone" v-model="userData.phone" required />
      </div>

      <div class="form-group">
        <label for="password">密码：</label>
        <input type="password" id="password" v-model="userData.password" required />
      </div>

      <div class="form-group">
        <label>性别：</label>
        <input type="radio" id="male" value="male" v-model="userData.gender" />
        <label for="male">男</label>

        <input type="radio" id="female" value="female" v-model="userData.gender" />
        <label for="female">女</label>
      </div>

      <div class="form-group">
        <label for="idCardFront">身份证正面：</label>
        <input type="file" id="idCardFront" @change="handleIdCardFrontUpload" accept="image/*" />
      </div>

      <div class="form-group">
        <label for="idCardBack">身份证背面：</label>
        <input type="file" id="idCardBack" @change="handleIdCardBackUpload" accept="image/*" />
      </div>

      <div class="form-group">
        <label for="drivingLicenseFront">驾驶证正面：</label>
        <input type="file" id="drivingLicenseFront" @change="handleDrivingLicenseFrontUpload" accept="image/*" />
      </div>

      <div class="form-group">
        <label for="drivingLicenseBack">驾驶证背面：</label>
        <input type="file" id="drivingLicenseBack" @change="handleDrivingLicenseBackUpload" accept="image/*" />
      </div>

      <button type="submit" class="submit-button">注册</button>
    </form>
  </div>
</template>

<script setup lang="ts" name="Register">
import { ref } from 'vue';

import axios  from 'axios';
import { useRouter } from 'vue-router';
const router = useRouter();

const userData = ref({
  name: '',
  password: '',
  gender: '',
  phone:'',
  idCard: null as File | null | undefined,
  drivingLicense: null as File | null | undefined,
  idCardFront: null as File | null | undefined,
  idCardBack: null as File | null | undefined,
  drivingLicenseFront: null as File | null | undefined,
  drivingLicenseBack: null as File | null | undefined,
});

const handleIdCardFrontUpload = (event: Event) => {
  const file = (event.target as HTMLInputElement).files?.[0];
  console.log('上传的身份证正面:', file);
  userData.value.idCardFront = file;
};

const handleIdCardBackUpload = (event: Event) => {
  const file = (event.target as HTMLInputElement).files?.[0];
  console.log('上传的身份证背面:', file);
  userData.value.idCardBack = file;
};

const handleDrivingLicenseFrontUpload = (event: Event) => {
  const file = (event.target as HTMLInputElement).files?.[0];
  console.log('上传的驾驶证正面:', file);
  userData.value.drivingLicenseFront = file;
};

const handleDrivingLicenseBackUpload = (event: Event) => {
  const file = (event.target as HTMLInputElement).files?.[0];
  console.log('上传的驾驶证背面:', file);
  userData.value.drivingLicenseBack = file;
};

const submitForm = async () => {
  // 创建一个FormData对象
  let formData = new FormData();

  // 将表单数据添加到FormData对象中
  formData.append('userName', userData.value.name);
  formData.append('userPhone', userData.value.phone);
  formData.append('userSex', userData.value.gender);
  formData.append('userPassword', userData.value.password);
  if (userData.value.idCardFront) {
    formData.append('userIdcard1', userData.value.idCardFront);
  }
  if (userData.value.idCardBack) {
    formData.append('userIdcard2', userData.value.idCardBack);
  }
  if (userData.value.drivingLicenseFront) {
    formData.append('userDriveCard1', userData.value.drivingLicenseFront);
  }
  if (userData.value.drivingLicenseBack) {
    formData.append('userDriveCard2', userData.value.drivingLicenseBack);
  }

  // 使用axios发送POST请求
  axios.post('http://localhost:8080/api/users/save', formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  }).then(response => {
    console.log(response.data);
  }).catch(error => {
    console.error(error);
  });
};
</script>

<style scoped>
.form-container {
  width: 300px;
  margin: 0 auto;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  position: absolute; /* 添加绝对定位 */
  top: 50%; /* 从顶部移动50% */
  left: 50%; /* 从左边移动50% */
  transform: translate(-50%, -50%); /* 使用transform来居中 */
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
}

.form-group input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.submit-button {
  width: 100%;
  padding: 10px;
  background-color: #007BFF;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.submit-button:hover {
  background-color: #0056b3;
}
</style>
